<ion-content>
    <div #mainContainer class="login-main-container">
            <div class="logo" #logoContainer>
                <img src="assets/images/login/pic_topword.png">
            </div>
            <ion-list no-lines class="login" #inputContainer>
                <ion-item class="name">
                    <ion-label>
                        <img src="assets/images/login/Username-Icon.png" alt="">
                    </ion-label>
                    <ion-input class="name-input" type="text" placeholder="请输入您的账号" #username
                               (ionChange)="inputChange(username,password)" (ionBlur)="userNameBlur(username)" (focus)="skipToPostion($event)" maxlength="30" ></ion-input>
                </ion-item>

                <ion-item class="pwd">
                    <ion-label>
                        <img src="assets/images/login/Password-Icon.png" alt="">
                    </ion-label>
                    <ion-input class="psd-input" type="password" placeholder="请输入您的密码" #password clearOnEdit="false"
                               (ionChange)="inputChange(username,password)" (focus)="skipToPostion($event)" maxlength="30"></ion-input>
                </ion-item>
            </ion-list>

            <div class="button-box" #loginInBtn>
                <button class="login-button" ion-button [disabled]="isDisabled"  (click)="logIn(username, password)">登录</button>
                <!--<div class="forget">忘记密码?</div>-->
            </div>
            <div class="forget-password" id="forget-password-container" #forgetPassword>
                <span (click)="forgetPasswordClick()">忘记密码?</span>
            </div>
    <!-- <div class="bot-img">
        <img src="assets/images/login/pic_logo.png">
    </div> -->
    </div>
</ion-content>
